<template>
  <div >
    <div class="detail-top" :class="detailTop"  @click="detailTo()">
      <div class="detailAllHeaderWrap">
        <van-dropdown-menu style="width: 100%">
          <van-dropdown-item :title="title" @open="positionClick()">
            <van-tree-select
                :items="positions"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-item="detailPositionRight()"
                @click-nav="detailPositionLeft()"
            />
          </van-dropdown-item>
          <van-dropdown-item title="菜系">
            <van-tree-select
                :items="cooks"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
            />
          </van-dropdown-item>
          <van-dropdown-item title="筛选" @open="selectContent()">
            <div class="filterContentWrap">
              <div class="selectTop" v-for="(father, indexFather) of selectContents">
                <div class="topContent">
                  <div class="selectTitle">
                    {{father.type}}
                  </div>
                  <div class="selectContent" v-for="(children, indexChildren) of father.children" :key="indexChildren">
                    <div v-if="father.tag === 'single'">
                      <div class="itemContent" :class="{checked: indexActive == children.id}"  @click="selectClickStar(children.id, children.name)">{{children.name}}</div>
                    </div>
                    <div v-else>
                      <div class="itemContent"  @click="selectClickOther($event, children.id, children.name)">{{children.name}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="selectBottom">
                <van-button type="default" block >
                  取    消
                </van-button>
                <van-button type="danger" block @click="submitSelectEat()" >
                  确    认
                </van-button>
              </div>
            </div>
          </van-dropdown-item>
          <van-dropdown-item v-model="intelligentSort" :options="intellSort" />
        </van-dropdown-menu>
      </div>
      <div class="selectCategory">
        <div class="categoryStyle">
          <ul class="ulStyle">
            <li class="liStyle" :class="{liStyleAfter: arr.includes(item.categoryName)}" @click="liClick(item.categoryName)" v-for="(item,index) in categoryList">

              <p style="display: flex; justify-content: space-between">
                <span class="iconStyle">
                  <van-icon size="16" :name="item.icon"/>
                </span>
                <span>
                  {{item.categoryName}}
                </span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="detail-allContent" :class="detailAllContent">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :offset="30"
          @load="onLoad(page)"
      >
        <van-cell v-for="(item, index) in bottomAllList" :key="index">
          <div class="allContent-bottom">
            <div class="bottomLeft">
              <van-image width="100" height="100" :src="item.ebImgUrl" />
            </div>
            <div class="bottomRight">
              <p class="rightName">{{item.ebName}}</p>
              <div v-if="item.ebDesc != null">
                <div class="rightScp">
                  <span class="rightScpScore"><span>{{item.ebScore}}</span>分</span>
                  <span class="rightScpComments">{{item.ebComments}}条点评</span>
                  <span class="rightScpPrice">￥{{item.ebPrice}}/人</span>
                </div>
              </div>
              <div v-else>
                <div class="rightScpNo">
                  <span class="rightScpScore"><span>{{item.ebScore}}</span>分</span>
                  <span class="rightScpComments">{{item.ebComments}}条点评</span>
                  <span class="rightScpPrice">￥{{item.ebPrice}}/人</span>
                </div>
              </div>
              <div class="rightDesc">
                <p v-if="item.ebDesc != null">{{item.ebDesc}}</p>
              </div>
              <div class="rightTad" style="display: flex; justify-content: space-between">
                <div class="rightTa rightType">
                  <span>{{item.ebType}} </span>
                  <span>{{item.ebAddress}}</span>
                </div>

                <div class="rightDistance">距您{{item.ebDistance}}m</div>
              </div>
            </div>
          </div>


        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "detailFoodInformation",
  data() {
    return {
      detailTop: '',
      detailAllContent: '',
      activeKey: 0,
      indexActive: 0,
      positions: [], // 位置数据
      selectContents: [], // 筛选数据
      intelligentSort: 1,
      intellSort: [
        { value: 1, text: "智能排序" },
        { value: 2, text: "人气排序"},
        { value: 3, text: "距离最近"},
        { value: 4, text: "人均最高"},
        { value: 5, text: "人均最低"}
      ], //智能排序数据
      cooks: [],
      title: '位置',
      activeId: 0, // 位置右侧ID
      activeIndex: 0, // 位置左侧ID

      selectStar:'', //  选择星级
      selectMid:[],
      selectOther:[], //  选择其他
      categoryList: [], // 类别
      bottomAllList: [], // 底部详细信息数据

      // detailAllContent 参数开始
      list: [],
      loading: false,
      finished: false,
      // detailAllContent 参数结束
      page:{
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      arr: [], // 快速选择样式选中 中间数组
      pageTotal: [],
    };
  },
  mounted() {
    window.addEventListener('scroll',this.detailTopChange);
    this.allCategory();
    // this.indexEatBottom(this.page);
  },

  methods: {
    liClick(name) {
      if (this.arr.includes(name)) {
        this.arr = this.arr.filter( _ => {
          return _ !=name;
        });
      } else {
        this.arr.push(name);
      }
    },
    detailTopChange(){
      let height = document.documentElement.scrollTop;
      if (height > 690) {
        this.detailTop = 'detailTop';
        this.detailAllContent = 'detailAllContent';
      } else {
        this.detailTop = ''
        this.detailAllContent = ''
      }
    },
    detailTo(){
      document.documentElement.scrollTop = 690
      this.detailTop = 'detailTop';
      this.detailAllContent = 'detailAllContent';
    },

    positionClick(){
      axios.get("data/detail-position.json").then(res => {
        this.positions = res.data;
      })
    },
    selectContent(){
      axios.get("data/eatSelectContent.json").then(res => {
        this.selectContents = res.data;
      })
    },
    detailPositionRight(){
      this.title = this.positions[this.activeIndex].children[this.activeId].text;
    },
    detailPositionLeft(){
      this.activeId = 0;
      this.activeIndex = 0;
    },

    allCategory() {
      axios.get("data/selectCategory.json").then(res => {
        this.categoryList = res.data;
      })
    },

    indexEatBottom(page) {
      this.getRequest("/home/eat/bottom/all/"+"?currentPage="+page.currentPage+"&&"+"pageSize="+page.pageSize).then(res => {
        this.pageTotal = Math.ceil(res.data.obj.total / 10);
        res.data.obj.records.forEach(item => {
          this.bottomAllList.push(item)
          this.loading = false
        })
        if (page.currentPage > 0 && page.currentPage <= this.pageTotal) {
          page.currentPage ++;
          // this.loading = false;
        } else {
          this.finished = true;
        }
      })

    },

    selectClickOther(e,id,name){
      this.selectOther.push(name);

      if (e.target.className.indexOf("checked") == -1) {
        e.target.className = "itemContent checked";
      } else {
        e.target.className = "itemContent";
      }
    },
    selectClickStar(id,name) {
      this.selectStar = name;
      this.indexActive = id;
    },
    submitSelectEat() {
     console.log(this.selectStar+","+this.selectOther.toString())
    },

    // detailAllContent 开始
    onLoad(page) {
      setTimeout(() => {
        this.indexEatBottom(page);
      },1000)

    }
    // detailAllContent 结束
  }
}
</script>

<style scoped>

.detail-top {
  top: 0;
  overflow: hidden;
  text-align: left;
  z-index: 200;
}

.detailTop {
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 200;
}

.detail-allContent {
  overflow: hidden;
  padding-bottom: 10%;
  text-align: center;
}

.detailAllContent {
  position: relative;
  width: 100%;
}

.detailAllHeaderWrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  /*padding: 0 15px;*/
  height: 49px;
  flex-shrink: 0;
  position: relative;
}

.selectTop {
  overflow: hidden;
}

.topContent {
  padding: 12px 8px 1px;
  font-size: 13px;
  color: #222222;
  background: #ffffff;
}

.selectContent{
  width: 24%;
  float: left;
  margin: 1px;
}

.selectTitle {
  line-height: 20px;
  padding: 0 4px 8px;
}

.itemContent {
  width: 100%;
  padding: 0 5px;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  font-family: PingFangSC-Regular;
  color: #333;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e3e6;
  border-radius: 7px;
  text-align: center;
  /*overflow: hidden;*/
}

.checked{
  color: #409EFF;
  border: 1px solid #409EFF;
}

.selectBottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.selectCategory{
  position: relative;
  background: #fff;
}
.categoryStyle {
  height: 36px;
  overflow: hidden;
  padding: 0 15px;
}
.ulStyle {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 45px;
}
.liStyle {
  display: inline-block;
  vertical-align: top;
  height: 24px;
  line-height: 24px;
  background: #f5f5f5;
  margin: 4px 8px 2px 0;
  padding: 0 10px;
  border-radius: 50px;
  color: #333;
}
.liStyleAfter {
  background: #fff2f2;
  color: #dd2626;
}
.iconStyle{
  margin-top: 3px;
  color: red;
}

.allContent-bottom {
  display: flex;
}

.bottomRight{
  width: 100%;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  display: flex;
  margin-left: 12px;
  overflow: hidden;
  padding-right: 6px;
}

.rightName {
  margin-top: -3px;
  color: #222;
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rightScp {
  flex: 1;
  display: flex;
  align-items: center;
  justify-self: flex-start;
  font-size: 12px;
  color: #333333;
  font-family: PingFangSC-Regular;
}
.rightScpNo {
  margin-top: 15px;
  margin-bottom: -10px;
}
.rightScpScore {
  color: #dd2626;
  font-size: 11px;
}
.rightScpScore span {
  font-size: 15px;
}
.rightScpComments, .rightScpPrice {
  margin-left: 8px;
  font-size: 12px;
  color: rgb(51,51,51);
}

.rightDesc {
  display: flex;
  flex-wrap: wrap;
  height: 18px;
  margin-top: 2px;
  overflow: hidden;
}
.rightDesc p {
  padding: 0 5px 1px;
  background: rgba(221,38,38,.08);
  color: #dd2626;
  font-size: 10px;
  border-radius: 2px;
  height: 17px;
  line-height: 17px;
  margin: 0 4px 2px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.isNull {

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.rightTad {
  display: flex;
}
.rightType {
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rightTa, .rightDistance {
  margin-top: 8px;
  font-size: 12px;
  color: #999999;
}
</style>